<script setup lang="ts">
definePage({
  name: 'router',
  style: {
    navigationBarTitleText: '路由管理',
  },
})

const { success: showSuccess } = useGlobalToast()
const router = useRouter()
const route = useRoute()

// 表单数据
const userId = ref('eduardo')
const searchKeyword = ref('vue')
const userName = ref('小星星')
const userLabel = ref('小熊熊')

// 基础导航方法
function pushByString() {
  // 字符串路径
  router.push('/pages/router/demo-string')
  showSuccess({ msg: '使用字符串路径跳转' })
}

function pushByPath() {
  // 带有路径的对象
  router.push({ path: '/pages/router/demo-object' })
  showSuccess({ msg: '使用path对象跳转' })
}

function pushByName() {
  // 命名的路由
  router.push({ name: 'demo-object' })
  showSuccess({ msg: '使用name跳转' })
}

// 参数传递示例
function pushWithParams() {
  if (!userId.value) {
    uni.showToast({
      title: '请输入用户ID',
      icon: 'none',
    })
    return
  }
  // 命名的路由，并加上参数
  router.push({ name: 'demo-params', params: { username: userId.value } })
  showSuccess({ msg: `传递参数: ${userId.value}` })
}

function pushWithQuery() {
  if (!searchKeyword.value) {
    uni.showToast({
      title: '请输入搜索关键词',
      icon: 'none',
    })
    return
  }
  // 带查询参数
  router.push({ path: '/pages/router/demo-query', query: { username: searchKeyword.value } })
  showSuccess({ msg: `传递查询参数: ${searchKeyword.value}` })
}

// 传递对象参数
function pushWithObjectParams() {
  const user = {
    name: userName.value,
    label: userLabel.value,
  }
  // 命名路由传递对象参数
  router.push({
    name: 'demo-params',
    params: { user: encodeURIComponent(JSON.stringify(user)) },
  })
  showSuccess({ msg: '传递对象参数(params)' })
}

function pushWithObjectQuery() {
  const user = {
    name: userName.value,
    label: userLabel.value,
  }
  // path+query传递对象参数
  router.push({
    path: '/pages/router/demo-query',
    query: { user: encodeURIComponent(JSON.stringify(user)) },
  })
  showSuccess({ msg: '传递对象参数(query)' })
}

// 导航守卫演示
function demoNavigationGuards() {
  showSuccess({ msg: '跳转到完整的导航守卫演示页面' })
  router.push({
    name: 'demo-guard',
  })
}

// Router方法演示
function demoPush() {
  router.push('/pages/router/demo-string')
  showSuccess({ msg: 'router.push() - 保留当前页面跳转' })
}

function demoPushTab() {
  router.pushTab('/pages/index/index')
  showSuccess({ msg: 'router.pushTab() - 跳转到tabBar页面' })
}

function demoReplace() {
  router.replace('/pages/router/demo-object')
  showSuccess({ msg: 'router.replace() - 替换当前页面' })
}

function demoReplaceAll() {
  router.replaceAll('/pages/index/index')
  showSuccess({ msg: 'router.replaceAll() - 关闭所有页面重新开始' })
}

function demoBack() {
  router.back()
  showSuccess({ msg: 'router.back() - 返回上一页' })
}

// 复制代码到剪贴板
function copyCode(code: string) {
  uni.setClipboardData({
    data: code,
    showToast: false,
    success: () => {
      uni.hideToast()
      showSuccess({ msg: '代码已复制到剪贴板' })
    },
  })
}

// 链接导航处理
function handleNavigate(url: string) {
  // #ifdef H5
  window.open(url, '_blank')
  // #endif
  // #ifndef H5
  uni.setClipboardData({
    data: url,
    showToast: false,
    success: () => {
      uni.hideToast()
      showSuccess({ msg: `${url} 已复制到剪贴板` })
    },
  })
  // #endif
}
</script>

<template>
  <view class="page-wrapper">
    <!-- 头部介绍 -->
    <view class="header-container">
      <view class="header-content">
        <view class="header-icon">
          🚀
        </view>
        <view class="header-title">
          uni-mini-router
        </view>
        <view class="header-subtitle">
          轻量级路由管理解决方案
        </view>
        <view class="header-description">
          支持编程式导航、参数传递、导航守卫等功能
        </view>
      </view>
    </view>

    <!-- 当前路由信息 -->
    <demo-block title="当前路由信息" transparent>
      <view class="route-info-card">
        <view class="route-info-item">
          <text class="route-info-label">
            路径:
          </text>
          <text class="route-info-value">
            {{ route.path }}
          </text>
        </view>
        <view class="route-info-item">
          <text class="route-info-label">
            名称:
          </text>
          <text class="route-info-value">
            {{ route.name || '未设置' }}
          </text>
        </view>
        <view class="route-info-item">
          <text class="route-info-label">
            参数:
          </text>
          <text class="route-info-value long-text">
            {{ JSON.stringify(route.params) }}
          </text>
        </view>
        <view class="route-info-item no-border">
          <text class="route-info-label">
            查询:
          </text>
          <text class="route-info-value long-text">
            {{ JSON.stringify(route.query) }}
          </text>
        </view>
      </view>
    </demo-block>

    <!-- 编程式导航 -->
    <demo-block title="编程式导航" transparent>
      <view class="nav-demos">
        <view class="nav-card">
          <view class="nav-title">
            基础用法
          </view>
          <view class="code-block" @click="copyCode('router.push(\'/user\')')">
            <text class="code-text">
              router.push('/user')
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <view class="button-grid">
            <wd-button type="primary" size="small" @click="pushByString">
              字符串路径跳转
            </wd-button>
            <wd-button type="success" size="small" @click="pushByPath">
              对象路径跳转
            </wd-button>
            <wd-button type="warning" size="small" @click="pushByName">
              命名路由跳转
            </wd-button>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- Router方法演示 -->
    <demo-block title="Router方法演示" transparent>
      <view class="router-methods">
        <view class="method-card">
          <view class="method-title">
            push 方法
          </view>
          <view class="method-description">
            保留当前页面，跳转到应用内的某个页面，相当于 uni.navigateTo()
          </view>
          <view class="code-block" @click="copyCode('router.push(target)')">
            <text class="code-text">
              router.push(target)
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="primary" block @click="demoPush">
            演示 push 方法
          </wd-button>
        </view>

        <view class="method-card">
          <view class="method-title">
            pushTab 方法
          </view>
          <view class="method-description">
            跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，相当于 uni.switchTab()
          </view>
          <view class="code-block" @click="copyCode('router.pushTab(target)')">
            <text class="code-text">
              router.pushTab(target)
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="success" block @click="demoPushTab">
            演示 pushTab 方法
          </wd-button>
        </view>

        <view class="method-card">
          <view class="method-title">
            replace 方法
          </view>
          <view class="method-description">
            关闭当前页面，跳转到应用内的某个页面，相当于 uni.redirectTo()
          </view>
          <view class="code-block" @click="copyCode('router.replace(target)')">
            <text class="code-text">
              router.replace(target)
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="warning" block @click="demoReplace">
            演示 replace 方法
          </wd-button>
        </view>

        <view class="method-card">
          <view class="method-title">
            replaceAll 方法
          </view>
          <view class="method-description">
            关闭所有页面，打开到应用内的某个页面，相当于 uni.reLaunch()
          </view>
          <view class="code-block" @click="copyCode('router.replaceAll(target)')">
            <text class="code-text">
              router.replaceAll(target)
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="error" block @click="demoReplaceAll">
            演示 replaceAll 方法
          </wd-button>
        </view>

        <view class="method-card">
          <view class="method-title">
            back 方法
          </view>
          <view class="method-description">
            关闭当前页面，返回上一页面或多级页面，相当于 uni.navigateBack()
          </view>
          <view class="code-block-group">
            <view class="code-block" @click="copyCode('router.back()')">
              <text class="code-text">
                router.back()
              </text>
              <wd-icon name="copy" size="32rpx" color="#666" />
            </view>
            <view class="code-block" @click="copyCode('router.back({ delta: 2 })')">
              <text class="code-text">
                router.back({ delta: 2 })
              </text>
              <wd-icon name="copy" size="32rpx" color="#666" />
            </view>
          </view>
          <wd-button type="info" block @click="demoBack">
            返回上一页
          </wd-button>
        </view>
      </view>
    </demo-block>

    <!-- 参数传递 -->
    <demo-block title="参数传递" transparent>
      <view class="important-note">
        <view class="note-title">
          ⚠️ 重要提示
        </view>
        <view class="note-content">
          在 uni-mini-router 中，params 和 query 参数都会以查询字符串形式放在 URL 中，两者在实际效果上并无区别。这种 API
          设计主要是为了与 vue-router 保持一致。
        </view>
      </view>
      <view class="param-demos">
        <view class="param-card">
          <view class="param-title">
            params 参数
          </view>
          <view class="param-description">
            注意：name 和 params 搭配使用，与 query 效果相同
          </view>
          <view class="input-container">
            <wd-input v-model="userId" placeholder="请输入用户名" />
          </view>
          <view
            class="code-block"
            @click="copyCode('router.push({ name: \'user\', params: { username: \'eduardo\' } })')"
          >
            <text class="code-text">
              router.push({ name: 'user', params: { username: 'eduardo' } })
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="primary" block @click="pushWithParams">
            传递 params 参数
          </wd-button>
        </view>

        <view class="param-card">
          <view class="param-title">
            query 参数
          </view>
          <view class="param-description">
            注意：path 可以与 query 一起使用，与 params 效果相同
          </view>
          <view class="input-container">
            <wd-input v-model="searchKeyword" placeholder="请输入搜索关键词" />
          </view>
          <view
            class="code-block"
            @click="copyCode('router.push({ path: \'/user\', query: { username: \'eduardo\' } })')"
          >
            <text class="code-text">
              router.push({ path: '/user', query: { username: 'eduardo' } })
            </text>
            <wd-icon name="copy" size="32rpx" color="#666" />
          </view>
          <wd-button type="success" block @click="pushWithQuery">
            传递 query 参数
          </wd-button>
        </view>

        <view class="param-card">
          <view class="param-title">
            传递对象参数
          </view>
          <view class="param-description">
            URL有长度限制，复杂对象需要使用 encodeURIComponent 编码
          </view>
          <view class="input-grid">
            <wd-input v-model="userName" placeholder="姓名" />
            <wd-input v-model="userLabel" placeholder="标签" />
          </view>
          <view class="button-grid-cols-2">
            <wd-button type="primary" size="small" @click="pushWithObjectParams">
              对象 params
            </wd-button>
            <wd-button type="success" size="small" @click="pushWithObjectQuery">
              对象 query
            </wd-button>
          </view>
        </view>
      </view>
    </demo-block>

    <!-- 导航守卫 -->
    <demo-block title="导航守卫" transparent>
      <view class="guard-note">
        <view class="note-title">
          💡 完整演示
        </view>
        <view class="note-content">
          导航守卫功能比较复杂，我们准备了专门的演示页面，包含实时日志、权限验证、参数检查等完整功能演示。
        </view>
      </view>
      <view class="guard-demos">
        <view class="guard-card">
          <view class="guard-title">
            基础守卫 API
          </view>
          <view class="guard-description">
            beforeEach 和 afterEach 是最常用的导航守卫
          </view>
          <view class="code-block-group">
            <view class="code-block" @click="copyCode('router.beforeEach((to, from, next) => { next() })')">
              <text class="code-text">
                router.beforeEach((to, from, next) => { next() })
              </text>
              <wd-icon name="copy" size="16px" color="#666" />
            </view>
            <view class="code-block" @click="copyCode('router.afterEach((to, from) => {  })')">
              <text class="code-text">
                router.afterEach((to, from) => { console.log(to) })
              </text>
              <wd-icon name="copy" size="16px" color="#666" />
            </view>
          </view>
          <wd-button type="primary" block @click="demoNavigationGuards">
            🛡️ 进入完整守卫演示
          </wd-button>
        </view>
      </view>
    </demo-block>

    <!-- 相关链接 -->
    <demo-block title="相关链接" transparent>
      <wd-cell-group border custom-class="custom-cell-group">
        <wd-cell
          title="📚 uni-mini-router 文档"
          value="路由管理"
          is-link
          @click="handleNavigate('https://moonofweisheng.github.io/uni-mini-router/')"
        />
        <wd-cell
          title="🐙 GitHub 仓库"
          value="uni-mini-router"
          is-link
          @click="handleNavigate('https://github.com/Moonofweisheng/uni-mini-router')"
        />
        <wd-cell
          title="📖 uni-app 路由文档"
          value="页面路由"
          is-link
          @click="handleNavigate('https://uniapp.dcloud.net.cn/tutorial/page.html')"
        />
      </wd-cell-group>
    </demo-block>
  </view>
</template>

<style lang="scss" scoped>
.page-wrapper {
  min-height: 100vh;
  padding: 12px 0;
  background-color: #f7f7f7;
}

.dark .page-wrapper {
  background-color: var(--wot-dark-background);
}

.header-container {
  margin: 0 12px 12px;
}

.header-content {
  padding: 32px 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
}

.dark .header-content {
  background-color: var(--wot-dark-background2);
}

.header-icon {
  margin-bottom: 12px;
  font-size: 40px;
}

.header-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.dark .header-title {
  color: var(--wot-dark-color);
}

.header-subtitle {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.dark .header-subtitle {
  color: var(--wot-dark-color2);
}

.header-description {
  font-size: 12px;
  color: #999;
}

.dark .header-description {
  color: var(--wot-dark-color2);
}

.route-info-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 12px;
}

.dark .route-info-card {
  background-color: var(--wot-dark-background2);
}

.route-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.dark .route-info-item {
  border-bottom-color: var(--wot-dark-border);
}

.route-info-label {
  font-size: 14px;
  color: #666;
}

.dark .route-info-label {
  color: var(--wot-dark-color2);
}

.route-info-value {
  font-family: monospace;
  font-size: 14px;
  color: #333;
}

.dark .route-info-value {
  color: var(--wot-dark-color);
}

.long-text {
  word-break: break-all;
}

.nav-demos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .nav-card {
  background-color: var(--wot-dark-background2);
}

.nav-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .nav-title {
  color: var(--wot-dark-color);
}

.code-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 12px;
  background-color: #f7fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.dark .code-block {
  background-color: var(--wot-dark-background3);
  border-color: var(--wot-dark-border);
}

.code-text {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  color: #4a5568;
}

.dark .code-text {
  color: var(--wot-dark-color);
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.router-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.method-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .method-card {
  background-color: var(--wot-dark-background2);
}

.method-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .method-title {
  color: var(--wot-dark-color);
}

.method-description {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.dark .method-description {
  color: var(--wot-dark-color2);
}

.code-block-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.important-note {
  margin-bottom: 12px;
  padding: 12px;
  background-color: rgba(255, 165, 0, 0.1);
  border: 1px solid rgba(255, 165, 0, 0.2);
  border-radius: 8px;
}

.dark .important-note {
  background-color: rgba(255, 165, 0, 0.2);
}

.note-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #d97706;
}

.dark .note-title {
  color: #f59e0b;
}

.note-content {
  font-size: 12px;
  line-height: 1.6;
  color: #b45309;
}

.dark .note-content {
  color: #fde68a;
}

.param-demos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.param-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .param-card {
  background-color: var(--wot-dark-background2);
}

.param-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .param-title {
  color: var(--wot-dark-color);
}

.param-description {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.dark .param-description {
  color: var(--wot-dark-color2);
}

.input-container {
  margin-bottom: 12px;
}

.input-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.button-grid-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.guard-note {
  margin-bottom: 12px;
  padding: 12px;
  background-color: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
}

.dark .guard-note {
  background-color: rgba(59, 130, 246, 0.2);
}

.guard-demos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guard-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
}

.dark .guard-card {
  background-color: var(--wot-dark-background2);
}

.guard-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.dark .guard-title {
  color: var(--wot-dark-color);
}

.guard-description {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.dark .guard-description {
  color: var(--wot-dark-color2);
}

.custom-cell-group {
  border-radius: 8px !important;
  overflow: hidden;
}
</style>
